<!DOCTYPE html>
<link rel="match" href="reference/svg-image-positioning-ref.html" />
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" width="150" height="100" />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" width="0" height="100" />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" width="150" height="0" />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" height="100"  />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" width="150" />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" width="250" />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" height="250" />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" x="50" />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" y="50" />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" x="50" y="50" />
</svg>
<svg width="300" height="300">
    <rect x="0" y="0" width="250" height="250" fill="red" />
    <image href="assets/rectangle.png" x="-50" y="-50" />
</svg>
